<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 设置表单不会跳转下个页面 -->
        <form @submit.prevent="demo">
            <!-- 去掉输入框前后空格 -->
            账号：<input type="text" v-model.trim="userInfo.account">
            <br>
            密码：<input type="password" v-model="userInfo.password">
            <br>
            <!-- 设置只能输入数字 -->
            年龄：<input type="number" v-model.number="userInfo.age">
            <br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
            <br>
            爱好：
            vue <input type="checkbox" v-model="userInfo.hobby" value="vue">
            react <input type="checkbox" v-model="userInfo.hobby" value="react">
            jquery <input type="checkbox" v-model="userInfo.hobby" value="jquery">
            <br><br>
            地址选项
            <select v-model="userInfo.city">
                <option value="">请选择地址</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br><br>
            其他信息：
            <!-- 设置不实时响应数据，失去焦点再响应数据 -->
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.baidu.com">《用户协议》</a>
            <br><br>
            <button>提交</button>
        </form>


    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            userInfo: {
                account: '',
                password: '',
                age: '',
                sex: '',
                hobby: [],
                city: '',
                other: '',
                agree: ''
            }
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this.userInfo));
            }

        }
    })
</script>

</html>